<template>
  <div>
    <el-row>
      <el-col :span="11">
        <el-container>
          <el-header class="layout-header">
            <img :src="require('../assets/imgs/kingbase_logo.png')" class="logo-img" />
            <span class="header-span">数据库在线体验平台</span>
          </el-header>
          <el-container :style="mainHeight" class="layout-main">
            <el-main>
              <div class="guide-component">
                <Welcome />
              </div>
              <!-- <GuideContent :stepNum="1"/> -->
            </el-main>
          </el-container>
          <el-footer class="layout-footer">
            <div class="btn">
              <el-button size="medium" class="next-btn" type="primary" :loading="applyResourceLoading" @click="handleApplyResource">
                开始体验
              </el-button>
            </div>
          </el-footer>
        </el-container>
      </el-col>
      <el-col :span="13" :style="editorHeight" class="editor-col">
        <!-- 编辑器 -->
        <EditorPage />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import router from "../router";
import EditorPage from "./EditorPage.vue";
import Welcome from "../components/Welcome.vue";
export default {
  name: "Login-Page",
  components: {
    EditorPage,
    Welcome
  },
  data() {
    return {
      mainHeight: {
        height: ""
      },
      editorHeight: {
        height: ""
      },
      // showSidebar: false,
      // menu: navMenu,
      // totalStep: null,
      stepNum: 1,
      isCollapse: true,
      applyResourceLoading: false
    };
  },
  created() {
    this.mainHeight.height = window.innerHeight - 150 + "px";
    this.editorHeight.height = window.innerHeight + "px";
    // this.totalStep = this.menu[this.menu.length - 1].stepNum;
  },
  methods: {
    async handleApplyResource() {
      let applySuccess = true;
      this.applyResourceLoading = true;
      const result = await this.$store.dispatch("applyResource");
      this.applyResourceLoading = false;
      applySuccess = result.success;
      if (!applySuccess) {
        this.$notify.error({
          title: "申请资源异常",
          message: result.message
        });
      } else {
        //申请资源成功后，跳转到home页面
        router.push("/home");
      }
    }
    // showMenu() {
    //     this.showSidebar = true;
    // },
    // hideMenu() {
    //     this.showSidebar = false;
    // },
    // stepNumChange(val) {
    //     this.stepNum = val;
    // },
    // prevStep() {
    //     this.stepNum -= 1;
    // },
    // async nextStep() {
    //     let applySuccess = true;
    //     if(this.stepNum == 1){
    //         this.nextStepLoading = true;
    //         const result = await this.$store.dispatch('applyResource')
    //         this.nextStepLoading = false
    //         applySuccess = result.success;
    //         if(!applySuccess){
    //             this.$notify.error({
    //                 title: "申请资源异常",
    //                 message: result.message
    //             })
    //         }
    //     }
    //     if(applySuccess){
    //         this.stepNum += 1;
    //         if (this.stepNum > this.totalStep) {
    //             //完成学习后回到查询模式页面
    //             this.stepNum = 2;
    //         }
    //     }
    // },
  }
};
</script>
<style scoped>
.el-header {
  padding: 0 !important;
}

.el-footer {
  padding: 0 !important;
}

.el-aside {
  width: 40px !important;
  background-color: rgb(240, 241, 243);
}

.layout-header {
  height: 60px;
  box-shadow: 0px 5px 18px 0px #a33b351a;
}

.logo-img {
  height: 60px;
}

.header-span {
  font-size: 30px;
  position: relative;
  bottom: 20px;
}

/* 阴影效果 */
.layout-main {
  box-shadow: 0px 5px 18px 0px rgba(163, 59, 53, 0.1);
}

.layout-footer {
  height: 90px;
}

/* 侧边栏 */
.sidebar {
  width: 300px;
  height: calc(100vh - 150px);
  overflow: auto;
  background-color: rgb(248, 250, 253);
  position: fixed;
  z-index: 99;
}

.editor-col {
  background-color: #131416;
}
.btn {
  text-align: right;
  margin-right: 10px;
  padding-top: 40px;
}

.btn .next-btn {
  width: 96px;
}

.el-button--primary {
  background-color: #b81c22;
  border-color: #b81c22;
}

.el-button--primary:hover,.el-button--primary:focus {
    background-color: #ca7570;
    border-color: #ca7570;
}

.el-button--default:hover,.el-button--default:focus {
    background-color: #fff;
    border-color: #b81c22;
    color: #b81c22;
}

.guide-component {
  padding: 20px 40px;
}

.horizontal-line {
  border-top: 1px solid #51515120;
  /* 设置顶部边框*/
  height: 0;
  /* 设置高度为0，使得div没有高度，只显示边框 */
}
</style>
<style>
.guide-component .markdown-body {
  padding: 20px 0px;
}
</style>